<template>
  <div class="login">
    <div style="
        background: rgba(0, 0, 0, 0.4);
        height: 100%;
        width: 100%;
        padding-top: 200px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        position: fixed;
      ">
      <el-row class="elRow" :style="{ right: isArabic ? '0%' : '', left: isArabic ? '' : '2.5%' }" type="flex"
        justify="center">
        <el-col :lg="12" :md="8" :span="12">
          <div class="leftBox">
            <div class="txtBox">
              <h1>CONFIGURATION</h1>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="login-content" :style="{ marginRight: isArabic ? '' : '10%', marginLeft: isArabic ? '8%' : '' }">
        <el-form ref="loginForm1" :model="loginForm" :rules="loginRules" class="login-form">
          <el-form-item prop="img">
            <svg-icon width="240" height="52" name="newlogo"></svg-icon>
          </el-form-item>
          <p></p>
          <el-form-item prop="email" style="display: flex; flex-direction: row">
            <el-input v-model="loginForm.email" type="text" auto-complete="off" :placeholder="$t('账号')">
              <template #prefix>
                <svg-icon width="15" height="15" name="renyuan"></svg-icon>
              </template>
            </el-input>
          </el-form-item>
          <!-- @keyup.enter.native="handleLogin" -->
          <el-form-item prop="password" style="display: flex; flex-direction: row">
            <!-- <svg-icon name="user" /> -->

            <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('密码')">
              <template #prefix>
                <svg-icon width="15" height="15" name="yaoshi"></svg-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="">
            <!-- @click.native.prevent="handleLogin"  -->
            <el-button :loading="loading" size="medium" type="default" style="
                background-color: rgb(24, 166, 137);
                color: aliceblue;
                z-index: 99;
                border: none;
              " @click.native.prevent="handleLogin">
              <span v-if="!loading"> {{ $t("登录") }}</span>
              <span v-else>Logining...</span>
            </el-button>
          </el-form-item>
          <el-form-item style="display: none">
            <el-button size="medium" type="default" style="width: 100%" @click="MOLogin">
              <span>
                <svg-icon name="weiruan" />
                {{ $t("Microsoft Office 365") }}
              </span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--  底部  -->
      <div class="el-login-footer">
        <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
        <span>Powered by</span><el-image :src="bottomImg" style="margin-left: 0.5%"></el-image>
      </div>
      <!-- v-if="dev" -->
      <div class="changeEnv" v-if="dev.d === 'true'">
        <a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model:value="changeEnv" show-search placeholder="Select a person" style="width: 200px; color: white"
          :options="options" :filter-option="filterOption" @change="handleChange"></a-select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElForm, ElFormItem, ElInput, ElButton } from "element-plus";
import { Local, Session } from "@/utils/storage";
import topImg from "@/assets/HRResources/login/logo.png";
const { t: $t } = useI18n();
import bottomImg from "@/assets/HRResources/login/itflogo.png";
import emitter from "@/utils/bus";
import hooks from "@/hooks";
const { isCn, isArabic, isEn } = hooks.useLanguage()
const dev = reactive({
  d: import.meta.env.VITE_DEV
});
const changeEnv = ref(Local.get("envValue") || 0);
Local.get("envValue") ?? Local.set("envValue", 0);
const options = [
  { value: 0, label: "47测试", url: 'prod-api', },
  { value: 1, label: "Vincent本地", url: 'vincent-api', },
  { value: 2, label: "Levi本地", url: 'Levi', },
  { value: 3, label: "garrick本地", url: 'garrick', },
];
const handleChange = (val) => {
  // window.config.baseUrl = val === 0 ? "prod-api" : "vincent-api";
  window.config.baseUrl = options.filter((l) => l.value === val)[0].url;
  changeEnv.value = val;
  Local.set("envValue", val);
};
// Local.set(CommonEnum.setRedisLocalLanguage, false)
const router = useRouter();
// 使用缓存技术
const store = useStore();
// 注册 Element Plus 组件
const components = {
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
};
onMounted(() => { });
const MOLogin = () => { };
// const PLMS = ref($t("HRIS"));
// const creater = ref($t("Human Resource Information System"));
const PLMS = ref("HRIS");
const creater = ref("Human Resource Information System");
const loginForm = reactive({
  // email: import.meta.env.VITE_DEV === 'true' ? "test@itforce-tech.com" : "",
  // password: import.meta.env.VITE_DEV === 'true' ? "ItforceSZ@2024" : "",
  // loginType: 0,
  email: "",
  password: "",
  loginType: 0,
});
const checkemail = function (rule, value, callback) {
  const reg = new RegExp("^[A-Za-z0-9]+([._\\-]*[A-Za-z0-9])*@([A-Za-z0-9]+[-A-Za-z0-9]*[A-Za-z0-9]+.){1,63}[A-Za-z0-9]+$");
  if (value) {
    if (!reg.test(value)) {
      return Promise.reject($t("邮箱格式不正确"));
    } else {
      return Promise.resolve();
    }
  } else {
    return Promise.reject($t("请输入邮箱"));
  }
};
const loginRules = {
  email: [{ required: true, validator: checkemail, trigger: ["blur"] }],
  password: [{ required: true, trigger: "blur", message: $t("请输入密码") }],
};
const rightT1 = ref($t("HR Department / Majnoon IFMS"));
const rightT2 = ref($t("HRIS@majnoon-ifms.com 00964-34354645"));
const loading = false;
const loginForm1 = ref();
const redirect = ref(router.currentRoute.value.query.redirect);
//点击登录
const handleLogin = () => {
  window.config.baseUrl = options.filter((l) => l.value === Local.get("envValue"))[0]?.url;
  loginForm1.value.validate(async (valid) => {
    if (valid) {
      await store.dispatch("loginStore/Login", loginForm).then((r) => {
        router.replace("/" + store.getters.getCurrentMenu);
        //初始化多语言数据
        // !Local.get(CommonEnum.setRedisLocalLanguage) && getLanguageList(true, false)

        emitter.emit("loginStatus", "ok");
      });
    }
  });
};


</script>

<style lang="scss" scoped>
.changeEnv {
  position: absolute;
  right: 10px;
  top: 15px;
}

.elRow {
  position: fixed;
  top: 11%;


  .leftBox {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .txtBox {
    display: flex;
    width: 100%;
    height: auto;
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    font-weight: bold;
  }

}

.login {
  width: 100%;
  background: url("../../assets/HRResources/login/login-bg.jpg") center no-repeat;
  height: 100%;
  padding: 0px;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-content {
  display: flex;
  flex-direction: column;
}

.rightItem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 48px;
}

.login-form {
  border-radius: 12px;
  background: #ffffff;
  width: 400px;
  padding: 25px 80px 50px 80px;
  background: rgba(0, 0, 0, .3);

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .elImg {
    pointer-events: none;
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 50px;
  width: 100%;
  text-align: left;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
  left: 30px;
  display: flex;
  flex-direction: row;
}

.login-code-img {
  height: 38px;
}

:deep(.el-form-item__content) {
  justify-content: center;
}
</style>